import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";

// 渲染左侧
export const elementData = (data) => {
  const arr = data.map((t, ind) => {
    let options = {
      // 绑定字段
      field: "",
      // 高
      height: "",
      // 宽
      width: "",
      // 图片地址
      url: "",
      // 测试测试
      data: "",
      zIndex: 2,
    };
    if (t.printType == "qrcode") {
      options.textType = "qrcode";
      options.height = 50;
      options.width = 50;
      // options.lineHeight = 50
      // 条形码给固定宽高
    } else if (t.printType == "barcode") {
      options.textType = "barcode";
      options.height = 20;
      options.width = 120;
    } else if (t.printType == "image") {
      options.height = 150;
      options.width = 150;
      options.src = t.data;
    } else {
      options.height = 20;
      options.width = 120;
    }

    // 绑定字段
    options.field = t.printField;
    return {
      tType: "fid",
      tid: `defaultModule.${t.printField}-${ind}`,
      title: t.printName,
      data: t.data,
      type:
        t.printType == "barcode" || t.printType == "qrcode"
          ? "text"
          : t.printType,
      options: options,
      printType: t.printType,
    };
  });

  /**
   * 工具类
   */
  const tool = [
    {
      tid: "defaultModule.logo",
      title: "LOGO",
      data: import.meta.env.VITE_LOGO_URL,
      options: {
        height: 80,
        width: 80,
        src: import.meta.env.VITE_LOGO_URL,
        zIndex: 1,
      },
      type: "image",
    },
    {
      tid: "defaultModule.title",
      title: "标题",
      type: "text",
      options: {
        height: 20,
        width: 300,
        lineHeight: 20,
        fontSize: "18",
        fontWeight: 700,
        textAlign: "center",
      },
    },
    {
      tid: "defaultModule.hline",
      title: "横线",
      type: "hline",
    },
    {
      tid: "defaultModule.vline",
      title: "竖线",
      type: "vline",
    },
    {
      tid: "defaultModule.rect",
      title: "矩形",
      type: "rect",
    },
    {
      tid: "defaultModule.oval",
      title: "椭圆",
      type: "oval",
    },
  ];

  return { tool, arr };
};

/**
 * Creates a provider function that adds element types to the context.
 *
 * @param {Object} data - The data object.
 * @return {Object} An object with the `addElementTypes` method.
 */
export const provider = (data) => {
  /**
   * Adds element types to the context.
   *
   * @param {Object} context - The context object.
   * @return {Promise} A promise that resolves when the element types are added.
   */
  var addElementTypes = async function (context) {
    // 移除 旧的 defaultModule "元素"类型, 以避免重复
    context.removePrintElementTypes("defaultModule");
    // 添加 defaultModule "元素"类型
    context.addPrintElementTypes("defaultModule", [
      // PrintElementTypeGroup 分组 如果使用
      //new hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "defaultModule"), //这里会渲染这个 "常规" 分组名称
      new hiprint.PrintElementTypeGroup("常规", data),

      new hiprint.PrintElementTypeGroup("辅助", [
        {
          tid: "defaultModule.logo",
          title: "GOLO",
          printType: "image",
        },
        {
          tid: "defaultModule.hline",
          title: "横线",
          type: "hline",
        },
        {
          tid: "defaultModule.vline",
          title: "竖线",
          type: "vline",
        },
        {
          tid: "defaultModule.rect",
          title: "矩形",
          type: "rect",
        },
        {
          tid: "defaultModule.oval",
          title: "椭圆",
          type: "oval",
        },
      ]),
    ]);
  };

  return {
    addElementTypes: addElementTypes,
  };
};
